<style>
.layui-input-block{
margin-left:120px;
}
</style>
<form class="layui-form" action="" id="orderEditForm">
  <div class="layui-form-item" style="padding-top:20px">
    <label class="layui-form-label col-sm-1" style="width:150px;"><font color='red' size="4">*</font>物料编码</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
    	<!-- 初始化物料审核信息 -->
	    <select name="materialCoding" style="width:240px;" lay-verify="required" required lay-ignore></select>
    	<input type="hidden" class="layui-input" name="materialId" lay-verify="required"/> 
    </div>
    <label class="layui-form-label col-sm-1" style="width:150px;"><font color='red' size="4">*</font>物料名称</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
	    <input type="text" readOnly='true' class="layui-input" required name="materialName" lay-verify="required"/>
    </div>
    <label class="layui-form-label col-sm-1" style="width:150px;">物料规格</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
    <input type="text" readOnly='true' class="layui-input" required name="materialSpec" lay-verify="required"/>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label col-sm-1" style="width:150px;"><font color='red' size="4">*</font>物料类型</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
    	<input type="text" readOnly='true' class="layui-input" required name="materialTypeName" lay-verify="required"/>
    </div>
  	<label class="layui-form-label col-sm-1" style="width:150px;"><font color='red' size="4">*</font>计量单位</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
    	<input type="text" readOnly='true' class="layui-input" required name="materialUnitName" lay-verify="required"/>
    </div>
    <!-- 分割线 -->
    <HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3>
  </div>
  <div class="layui-form-item">
  	<label class="layui-form-label col-sm-1" style="width:150px;"><font color='red' size="4">*</font>供应商名称</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
    	 <select name="supplierId" lay-verify="required" lay-filter="supplierId" required >
    	   <option value="" text="请选择供应商信息" selected="true"></option>
	       <option th:each="s:${supplierList}" th:attr="value=${s.id}" th:text="${s.name}"></option>
	    </select> 
    </div>
  	<label class="layui-form-label col-sm-1" style="width:150px;"><font color='red' size="4">*</font>是否安规</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
      <input type="radio" name="isSafied" value="true" title="是">
      <input type="radio" name="isSafied" value="false" title="否" checked>
    </div>
  	<label class="layui-form-label col-sm-1" style="width:150px;"><font color='red' size="4">*</font>是否停用</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
      <input type="radio" name="isNoUsed" value="true" title="是">
      <input type="radio" name="isNoUsed" value="false" title="否" checked>
    </div>
  </div>
  <div class="layui-form-item">
  	<label class="layui-form-label col-sm-2" style="width:150px;">证书生效日期</label>
    <div class="layui-input-block col-sm-2" style="width:250px; padding-left:0px;margin-left:0px;">
      <input type="text" id="safetyCertificateStart" class="layui-input" name='safetyCertificateStart'/>
    </div>
    <label class="layui-form-label col-sm-2" style="width:150px;">证书失效日期</label>
    <div class="layui-input-block col-sm-2" style="width:250px; padding-left:0px;margin-left:0px;">
      <input type="text" id="safetyCertificateEnd" class="layui-input" name="safetyCertificateEnd"/>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label col-sm-1 " style="width:150px;" >备注</label>
    <div class="layui-input-block col-sm-2" style="width:80%;padding-left:0px;margin-left:0px;">
      <input type="text" class="layui-input"  name="remark" />
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
          <button class="layui-btn" lay-submit="" lay-filter="formSubmit" authcode='900233'>提交</button>
      	  <button type="button" class="layui-btn layui-btn-primary" id="closeBtn">关闭</button>
    </div>
  </div>

</form>
<script>
layui.use('form', function(){
	 $("[name='materialCoding']").select2({
		  placeholder:"请选择存货信息",//placeholder
		  language: 'zh-CN',//中文语言
		  //allowClear:true,//出现删除按钮图片，可以清除下拉选中内容
		  ajax: {
			    url: "/eng/material/info/data",
			    dataType: 'json',
			    delay: 350,
			    data: function (params) {
			      console.log(params.page)
			      return {
			        name: params.term, // search term
			        companyid:1,
			        page: params.page,
			        limit:30
			      };
			    },
			    processResults: function (data, params) {
			      params.page = params.page || 1;
			      return {
			        results: data.data,
			        pagination: {
			          more: (params.page * 30) < data.count
			        }
			      };
			    },
			    cache: true
			  },
			  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
			  minimumInputLength: 0,//最小输入字符，输入最小字符后开始后台请求
			  templateResult: formatRepo, // 处理远程返回数据
			  templateSelection: formatRepoSelection // 设置下拉选中后显示内容
			});
	  
	  	function formatRepo (repo) {
	  		//下拉展示内容可以修改自定义样式
	      if (repo.loading) return repo.text;
	      var markup = "<div class=\"layui-row\" style='width:250px;'>" +
			      "<div class=\"layui-col-xs4 layui-col-sm4 layui-col-md3\">" +
			      	"<div class=\"grid-demo grid-demo-bg1\">"+repo.materialCoding+"</div>" +
			     "</div>"+
			     "<div class=\"layui-col-xs8 layui-col-sm8 layui-col-md9\">" +
			      	"<div class=\"grid-demo grid-demo-bg1\">"+repo.materialName+"</div>" +
			     "</div>";

	      return markup;
	    }

	    function formatRepoSelection (repo) {
	      return repo.materialCoding;//选中返回select中的值
	    }
	  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
	  form.render();
	  //物料信息选择带回事件
	  $("[name='materialCoding']").on("select2:select",function(e){
		  //设置ID回去
		  $("input[name='materialId']").val(e.params.data.id);
		  //设置物料名称回去
		  $("input[name='materialName']").val(e.params.data.materialName);
		  //设置物料规格回去
		  $("input[name='materialSpec']").val(e.params.data.materialSpec);
		  //设置计量单位回去
		  $("input[name='materialUnitName']").val(e.params.data.measurementUName);
		  //设置物料类型回去
		  $("input[name='materialTypeName']").val(e.params.data.materialTypeName);
	  });
	  
	  //监听提交
	  form.on('submit(formSubmit)', function(data){
	    $.ajax({
            type: "POST",
            url: "/eng/material/review/addReview",
            data: $("#orderEditForm").serializeJson(),
            dataType: "json",
            success: function(data){
            	if(data.code==200){
            	//关闭弹出层
            	layer.close(editdialogindex);
				layer.msg(result.message,{icon: 6});
           	    //更新表格数据
           	    ins.reload({url:'/eng/material/review/data'});
            	}else{
            		layer.msg(data.message);
            		//关闭
            	    layer.closeAll();
            	}
            }
           });
	  });
	  //关闭按钮
	  $("#closeBtn").click(function(){
		  layer.closeAll();
	  })
	});   
	layui.use("laydate",function(){
		var laydate = layui.laydate;
		laydate.render({
			  elem: '#safetyCertificateStart' //指定元素
			});
		laydate.render({
			  elem: '#safetyCertificateEnd' //指定元素
			});
	});
</script>
